<template>
  <div
    class="tree-item"
    :class="[
      !treeItemData.checked && indeterminate && 'indeterminate',
      treeItemData.checked && 'selected'
    ]"
  >
    <div class="line-wrapper">
      <div class="checkbox pointer" @click="handleChecked">
        <img v-if="treeItemData.checked" draggable="false" src="./imgs/check.svg" alt="" style="width: 20px" />
        <template v-else>
          <div v-if="indeterminate" class="indeterminate-dash"></div>
        </template>
      </div>
      <img
        v-if="treeItemData.icon"
        class="icon"
        :src="treeItemData.icon"
        :alt="treeItemData.label"
      />
      <div
        class="value"
        :class="[treeItemData.children && treeItemData.children.length && 'pointer']"
        @click="handleCollapsed"
      >
        {{ treeItemData.label }}
      </div>
      <div
        v-if="treeItemData.children && treeItemData.children.length"
        class="arrow pointer"
        @click="handleCollapsed"
        :class="[!treeItemData.collapsed && 'collapsed']"
      ></div>
    </div>
    <div
      v-if="treeItemData.children && treeItemData.children.length && !treeItemData.collapsed"
      class="children-wrapper"
    >
      <tree-item
        v-for="(item, index) of treeItemData.children"
        :key="item.value"
        :tree-item-data="item"
        @update:tree-item-data="(e) => handleChildUpdate(e, index)"
      ></tree-item>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'TreeItem'
}
</script>
<script setup lang="ts">
import { computed, toRefs } from 'vue'
import type { TreeItemProps } from '@/components/TreeSelect/index.d.ts'

const emits = defineEmits(['update:treeItemData'])

const props = defineProps({
  treeItemData: {
    type: Object as TreeItemProps,
    default: () => ({})
  }
})

const { treeItemData } = toRefs(props)

const checkChildrenChecked = (children: TreeItemProps[]) => {
  for (let i = 0; i < children.length; i++) {
    if (children[i].checked) {
      return true
    }
    if (children[i].children) {
      const ret = checkChildrenChecked(children[i].children)
      if (ret) {
        return ret
      }
    }
  }
  return false
}

const indeterminate = computed(() => {
  if (treeItemData.value.children) {
    return checkChildrenChecked(treeItemData.value.children)
  } else {
    return false
  }
})

const changeChildrenChecked = (children: TreeItemProps[], checked: boolean) => {
  for (let i = 0; i < children.length; i++) {
    children[i].checked = checked
    if (children[i].children) {
      changeChildrenChecked(children[i].children, checked)
    }
  }
}
const handleChecked = () => {
  treeItemData.value.checked = !treeItemData.value.checked
  if (treeItemData.value.children) {
    changeChildrenChecked(treeItemData.value.children, treeItemData.value.checked)
  }
  emits('update:treeItemData', treeItemData.value)
}

const handleCollapsed = () => {
  treeItemData.value.collapsed = !treeItemData.value.collapsed
  emits('update:treeItemData', treeItemData.value)
}

const handleChildUpdate = (item, index) => {
  treeItemData.value.children[index] = item
  if (treeItemData.value.children.every((item) => item.checked)) {
    treeItemData.value.checked = true
  } else {
    treeItemData.value.checked = false
  }
  emits('update:treeItemData', treeItemData.value)
}
</script>

<style scoped>
.tree-item {
  color: #ffffff;
  font-size: 14px;
  padding-top: 10px;
  user-select: none;
}
.line-wrapper {
  display: flex;
  align-items: center;
}
.children-wrapper {
  padding-left: 26px;
}
.checkbox {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #a5a9ba;
  margin-right: 16px;
  border-radius: 4px;
}
.icon {
  width: 18px;
  //height: 38px;
  margin-right: 16px;
}

.tree-item.selected > .line-wrapper > .checkbox,
.tree-item.indeterminate > .line-wrapper > .checkbox {
  background: #299F80;
  border-color: #299F80;
}
.arrow {
  border: 6px solid transparent;
  border-left-width: 0;
  border-right-color: #ffffff;
  transition: transform 0.3s;
  transform-origin: 4px center;
  transform: rotate(0deg);
  margin-left: 16px;
}
.arrow.collapsed {
  transform: rotate(-90deg);
}
.indeterminate-dash {
  width: 20px;
  height: 6px;
  background: #ffffff;
  border-radius: 3px;
}
</style>
